<!DOCTYPE html>
<html lang="en">
<!--图标-->
<link rel="icon" href="./img/logo.jpg">
<!--清除默认样式-->
<link rel="stylesheet" href="CSS/reset.css">
<!--CSS样式-->
<link rel="stylesheet" href="CSS/main.css">
<head>
    <meta charset="UTF-8">
    <title>晋本肴饮</title>
</head>
<style>
    /* 基础设置 */
body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td{
    margin: 0;
    padding: 0;
}

ul,ol {
    list-style: none;
}

img {
    /* 底部留白 */
    display: block;
	border:0;
}

b,strong {
    font-weight: 400;
}

h1,h2,h3,h4,h5,h6 {
    /* 父元素字号的百分比 */
    font-size: 100%;
    font-weight: normal;
}

i,em {
    /* 不倾斜 */
    font-style: normal;
}

u,ins,s,del {
    /* 去掉中划线和下划线 */
    text-decoration: none;
}

table {
    border: 1px solid #999;
    /* 相当于是cellspacing */
    border-spacing: 0;
    /* 1px边框 */
    border-collapse: collapse;
}

td,th {
    border: 1px solid #999;
}

input,button {
    /* 去掉轮廓线 */
    outline: none;
    border:none;
}

/* 风格设置 */
body {
    font: 12px/1.5 "Microsoft YaHei", Tahoma, Helvetica, Arial, "\5b8b\4f53", sans-serif;
    color: #333;
}

a {
    text-decoration: none;
    color: #666;
}

a:hover {
    color:#DD302D;
    text-decoration: none;
}

.leftfix {
    float: left;
}

.rightfix {
    float: right;
}

.clearfix::after {
    content: "";
    display: block;
    clear: both;
}
/*大背景*/
.backDrop {
    width: 1500px;
    height: 3220px;
    background: #faf0de;
    margin: 0 auto;
}
/*顶栏*/
.topBar {
    width: 100%;
    height: 60px;
    background: black;
    position: relative;
    top: 0;
}
.logo {
    width: 50px;
    height: 50px;
    position: absolute;
    top: 5px;
    left:300px;
}
.logoTitle {
    color: white;
    position: absolute;
    top: 7px;
    left: 360px;
    font-size: 30px;
    font-family: '方正启体繁体', serif;
}
.logoWord {
    color: white;
    position: absolute;
    top: 35px;
    left: 490px;
    font-family: fangsong;
    font-size: 10px;
}
.search {
    width: 200px;
    height: 20px;
    position: absolute;
    top: 20px;
    left: 900px;
    border: 1px white solid;
    background: black;
    color: white;
    font-size: 12px;
    text-indent: 5px;
}
.searchButton {
    width: 50px;
    height: 22px;
    position: absolute;
    top: 20px;
    left: 1100px;
    background: #e8c176;
}
.searchButton img {
    width: 16px;
    height:16px;
    margin: 0 auto;
}
/*导航栏*/
.navigationBar {
    width: 100%;
    height: 60px;
    background: #880a0a;
    position: relative;
}
.navigationBar ul {
    width: 900px;
    height: 45px;
    position: absolute;
    top: 15px;
    left: 300px;
}
.navigationBar ul li {
    width: 150px;
    color: white;
    float: left;
    line-height: 45px;
    text-align: center;
}
.navigationBar ul li:hover {
    background: #e8c176;
}
.navActive {
    background: #e8c176;
}
/*轮播图照片*/
.carouselGraph {
    width: 100%;
    height: 600px;
    background: url("../img/导航栏图片.png") no-repeat;
    background-size: cover;
    position: relative;
}
/*选择你的养生奶茶*/
.chooseMilkTea {
    width: 100%;
    height: 550px;
    /*background: red;*/
}
.chooseMilkTeaTitle {
    width: 100%;
    height: 150px;
    position: relative;
}
.chooseMilkTeaTitleHrOne {
    width: 300px;
    position: absolute;
    top: 100px;
    left: 270px;
}
.chooseMilkTeaTitleHrSecond {
    width: 300px;
    position: absolute;
    top: 100px;
    left: 930px;
}
.chooseMilkTeaTitleSpan {
    position: absolute;
    font-size: 24px;
    color: #6b4603;
    font-weight: bold;
    top: 60px;
    left: 650px;
}
.chooseMilkTeaTitleLitterSpan {
    position: absolute;
    font-size: 12px;
    color: #6b4603;
    top: 100px;
    left: 685px;
}
.chooseMilkBody {
    width: 70%;
    height: 400px;
    position: relative;
    left: 15%;
    /*background: #DD302D;*/
}
.chooseMilkBody img {
    width: 25%;
    height: 100%;
    float: left;
}
/*选择你所需的食材*/
.chooseFoods {
    width: 100%;
    height: 520px;
    /*background: #999999;*/
}
.chooseFoodsTitle {
    width: 100%;
    height: 120px;
    position: relative;
}
.chooseFoodsTitleHrOne {
    width: 300px;
    position: absolute;
    top: 100px;
    left: 270px;
}
.chooseFoodsTitleHrSecond {
    width: 300px;
    position: absolute;
    top: 100px;
    left: 930px;
}
.chooseFoodsTitleSpan {
    position: absolute;
    font-size: 24px;
    color: #6b4603;
    font-weight: bold;
    top: 60px;
    left: 650px;
}
.chooseFoodsTitleLitterSpan {
    position: absolute;
    font-size: 12px;
    color: #6b4603;
    top: 100px;
    left: 673px;
}
.chooseFoodsNav {
    width:100%;
    height: 50px;
    /*background: #DD302D;*/
    position: relative;
}
.chooseFoodsNavOne  {
    width: 60px;
    height: 20px;
    background: #880a0a;
    color: white;
    font-size: 11px;
    text-align: center;
    line-height: 20px;
    position: absolute;
    top: 15px;
    left: 680px;
}
.chooseFoodsNavSecond  {
    width: 60px;
    height: 20px;
    background: #dec871;
    color: white;
    font-size: 11px;
    text-align: center;
    line-height: 20px;
    position: absolute;
    top: 15px;
    left: 740px;
}
.chooseFoodsBody {
    width: 100%;
    height: 350px;
    position: relative;
    background: #3a3737;
}
.chooseFoodsBodyPhoto {
    width: 70%;
    height: 70%;
    margin: 0 auto;
}
.chooseFoodsBody img {
    width: 23%;
    height: 100%;
    float: left;
    padding: 50px 10px 0;
}
/*提供提前预约服务*/
.chooseServe {
    width: 100%;
    height: 430px;
    /*background: #999999;*/
}
.chooseServeTitle {
    width: 100%;
    height: 120px;
    position: relative;
}
.chooseServeTitleHrOne {
    width: 300px;
    position: absolute;
    top: 100px;
    left: 270px;
}
.chooseServeTitleHrSecond {
    width: 300px;
    position: absolute;
    top: 100px;
    left: 930px;
}
.chooseServeTitleSpan {
    position: absolute;
    font-size: 24px;
    color: #6b4603;
    font-weight: bold;
    top: 60px;
    left: 650px;
}
.chooseServeTitleLitterSpan {
    position: absolute;
    font-size: 12px;
    color: #6b4603;
    top: 100px;
    left: 673px;
}
.chooseServeNav {
    width:100%;
    height: 50px;
    /*background: #DD302D;*/
    position: relative;
}
.chooseServeNavOne {
    width: 60px;
    height: 20px;
    background: #dec871;
    color: white;
    font-size: 11px;
    text-align: center;
    line-height: 20px;
    position: absolute;
    top: 15px;
    left: 620px;
}
.chooseServeNavSecond {
    width: 60px;
    height: 20px;
    background: #880a0a;
    color: white;
    font-size: 11px;
    text-align: center;
    line-height: 20px;
    position: absolute;
    top: 15px;
    left: 680px;
}
.chooseServeNavThird {
    width: 60px;
    height: 20px;
    background: #dec871;
    color: white;
    font-size: 11px;
    text-align: center;
    line-height: 20px;
    position: absolute;
    top: 15px;
    left: 740px;
}
.chooseServeNavFour {
    width: 60px;
    height: 20px;
    background: #dec871;
    color: white;
    font-size: 11px;
    text-align: center;
    line-height: 20px;
    position: absolute;
    top: 15px;
    left: 800px;
}
.chooseServeBody {
    width: 70%;
    height: 250px;
    position: relative;
    left: 17%;
}
.chooseServeBody img {
    width: 17%;
    height: 100%;
    float: left;
    padding: 0 10px 0;
}
/*精彩活动抢先知*/
.boutiqueActivities {
    width: 100%;
    height: 500px;
    /*background: #DD302D;*/
}
.boutiqueActivitiesTitle {
    width: 100%;
    height: 120px;
    position: relative;
}
.boutiqueActivitiesTitleHrOne {
    width: 300px;
    position: absolute;
    top: 100px;
    left: 270px;
}
.boutiqueActivitiesTitleHrSecond {
    width: 300px;
    position: absolute;
    top: 100px;
    left: 930px;
}
.boutiqueActivitiesTitleSpan {
    position: absolute;
    font-size: 24px;
    color: #6b4603;
    font-weight: bold;
    top: 60px;
    left: 650px;
}
.boutiqueActivitiesTitleLitterSpan {
    position: absolute;
    font-size: 12px;
    color: #6b4603;
    top: 100px;
    left: 693px;
}
.boutiqueActivitiesNav {
    width:100%;
    height: 50px;
    /*background: #DD302D;*/
    position: relative;
}
.boutiqueActivitiesNavOne  {
    width: 60px;
    height: 20px;
    background: #dec871;
    color: white;
    font-size: 11px;
    text-align: center;
    line-height: 20px;
    position: absolute;
    top: 15px;
    left: 680px;
}
.boutiqueActivitiesNavSecond  {
    width: 60px;
    height: 20px;
    background: #880a0a;
    color: white;
    font-size: 11px;
    text-align: center;
    line-height: 20px;
    position: absolute;
    top: 15px;
    left: 740px;
}
.boutiqueActivitiesView {
    width: 100%;
    height: 330px;
    /*background: wheat;*/
    position: relative;
}
.boutiqueActivitiesView img:nth-child(1) {
    width: 400px;
    height: 250px;
    position: absolute;
    top: 40px;
    left: 550px;
    opacity: 0.8;
    z-index: 1;
}
.boutiqueActivitiesView img:nth-child(2) {
    width: 370px;
    height: 230px;
    position: absolute;
    top: 50px;
    left: 300px;
    opacity: 0.5;
}
.boutiqueActivitiesView img:nth-child(3) {
    width: 370px;
    height: 230px;
    position: absolute;
    top: 50px;
    left: 800px;
    opacity: 0.5;
}
.boutiqueActivitiesView img:nth-child(4) {
    width: 100px;
    height: 100px;
    position: absolute;
    top: 120px;
    left: 690px;
    z-index: 2;
}
/*尾部底栏*/
.footer {
    width: 100%;
    height: 500px;
    background: #4b4646;
    position: relative;
}
.redFooter {
    width: 20%;
    height: 100px;
    position: absolute;
    top: 0;
    left: 38%;
    background: #880a0a;
}
.redFooter div {
    color: white;
    font-size: 14px;
    width: 100%;
    height: 50px;
    line-height: 50px;
    text-align: center;
}
.redFooter button {
    width: 70px;
    color: white;
    background: #880a0a;
    border: 1px white solid;
    padding: 5px;
    position: absolute;
    left: 35%;
}
.collect {
    width: 60%;
    height: 300px;
    position: absolute;
    top: 100px;
    /*background: black;*/
    left: 20%;
}
.collectOne {
    color: white;
    position: absolute;
    top: 50px;
}
.collectTwo {
    width: 450px;
    height: 80px;
    /*background: white;*/
    position: absolute;
    top:100px;
}
.collectThird {
    width: 450px;
    height: 70px;
    /*background: white;*/
    position: absolute;
    top: 210px;
}
.collectFour {
    height: 230px;
    width: 0;
    position: absolute;
    left: 500px;
    top: 50px;
}
.collectFive {
    width: 300px;
    height: 200px;
    /*background: white;*/
    position: absolute;
    left: 550px;
    top: 70px;
    color: white;
}
.end {
    width: 100%;
    height: 100px;
    background: black;
    position: absolute;
    top: 400px;
}
.name {
    background: #4b4646;
    width: 100%;
    height: 30px;
    border: 1px white solid;
    color: white;
    margin-bottom: 20px;
}
.phone {
    background: #4b4646;
    width: 100%;
    height: 30px;
    border: 1px white solid;
    color: white;
    margin-bottom: 20px;
}
.email {
    background: #4b4646;
    width: 100%;
    height: 30px;
    border: 1px white solid;
    color: white;
}
.collectFive button {
    background: #4b4646;
    border: 1px white solid;
    width: 50px;
    height: 20px;
    position: absolute;
    top: 200px;
    left: 250px;
    color: white;
}
.introOne {
    width: 140px;
    height: 50px;
    float: left;
    color: white;
    font-size: 10px;
}
.introOne img {
    width: 16px;
    height: 16px;
    display: inline;
}
.introTwo {
    width: 60px;
    height: 50px;
    float: left;
    color: white;
    font-size: 10px;
}
.introTwo img {
    width: 40px;
    height: 40px;
    display: inline;
}
.end ul{
    color: white;
    position: absolute;
    top: 40px;
    left: 450px;
}
.end ul li {
    float: left;
    padding: 0 20px 0;
}
</style>
<body>
<!--大背景-->
    <div class="backDrop">
<!--        顶栏-->
        <div class="topBar">
            <img src="./img/logo.jpg" alt="" class="logo">
            <span class="logoTitle">晋本肴饮</span>
            <span class="logoWord">JIN BEN MILK TEA</span>
            <label>
                <input type="text" class="search" placeholder="请输入关键词">
                <button class="searchButton">
                    <img src="./img/搜索.png" alt="">
                </button>
            </label>
        </div>
<!--        导航栏-->
        <div class="navigationBar">
            <ul>
                <li class="navActive">网站首页</li>
                <li>公司简介</li>
                <li>养生饮品</li>
                <li>相生食谱</li>
                <li>合作加强</li>
                <li>新闻动态</li>
                <li>联系我们</li>
            </ul>
        </div>
        <div class="carouselGraph"></div>
        <div class="chooseMilkTea">
            <div class="chooseMilkTeaTitle">
                <hr class="chooseMilkTeaTitleHrOne">
                <div class="chooseMilkTeaTitleSpan">选择你的养生奶茶</div>
                <div class="chooseMilkTeaTitleLitterSpan">CHOOSE YOUR MILK</div>
                <hr class="chooseMilkTeaTitleHrSecond">
            </div>
            <div class="chooseMilkBody">
                <img src="./img/chooseMilkTea1.jpg" alt="">
                <img src="./img/chooseMilkTea2.jpg" alt="">
                <img src="./img/chooseMilkTea3.jpg" alt="">
                <img src="./img/chooseMilkTea4.jpg" alt="">
            </div>
        </div>
        <div class="chooseFoods">
            <div class="chooseFoodsTitle">
                <hr class="chooseFoodsTitleHrOne">
                <div class="chooseFoodsTitleSpan">请选择你所需食材</div>
                <div class="chooseFoodsTitleLitterSpan">INGREDIENTS YOU NEED</div>
                <hr class="chooseFoodsTitleHrSecond">
            </div>
            <div class="chooseFoodsNav">
                <div class="chooseFoodsNavOne">蔬菜类</div>
                <div class="chooseFoodsNavSecond">肉类</div>
            </div>
            <div class="chooseFoodsBody">
                <div class="chooseFoodsBodyPhoto">
                    <img src="./img/chooseFoods1.jpg" alt="">
                    <img src="./img/chooseFoods2.jpg" alt="">
                    <img src="./img/chooseFoods3.jpg" alt="">
                    <img src="./img/chooseFoods4.jpg" alt="">
                </div>
            </div>
        </div>
        <div class="chooseServe">
            <div class="chooseServeTitle">
                <hr class="chooseServeTitleHrOne">
                <div class="chooseServeTitleSpan">提供提前预约服务</div>
                <div class="chooseServeTitleLitterSpan">RESERVATION SERVICEV</div>
                <hr class="chooseServeTitleHrSecond">
            </div>
            <div class="chooseServeNav">
                <div class="chooseServeNavOne">服务员</div>
                <div class="chooseServeNavSecond">厨师</div>
                <div class="chooseServeNavThird">餐桌预定</div>
                <div class="chooseServeNavFour">会员充值</div>
            </div>
            <div class="chooseServeBody">
                <img src="./img/chooseServe1.jpg" alt="">
                <img src="./img/chooseServe2.jpg" alt="">
                <img src="./img/chooseServe3.jpg" alt="">
                <img src="./img/chooseServe4.jpg" alt="">
                <img src="./img/chooseServe5.jpg" alt="">
            </div>
        </div>
        <div class="boutiqueActivities">
            <div class="boutiqueActivitiesTitle">
                <hr class="boutiqueActivitiesTitleHrOne">
                <div class="boutiqueActivitiesTitleSpan">精选活动抢先知道</div>
                <div class="boutiqueActivitiesTitleLitterSpan">FIRST TO KNOW</div>
                <hr class="boutiqueActivitiesTitleHrSecond">
            </div>
            <div class="boutiqueActivitiesNav">
                <div class="boutiqueActivitiesNavOne">精选活动</div>
                <div class="boutiqueActivitiesNavSecond">精选视屏</div>
            </div>
            <div class="boutiqueActivitiesView">
                <img src="./img/actives1.jpg" alt="">
                <img src="./img/avtives2.png" alt="">
                <img src="./img/carouselGraph.jpg" alt="">
                <img src="./img/视频暂停.png"  alt="">
            </div>
        </div>
<!--        尾栏-->
        <div class="footer">
            <div class="redFooter">
                <div>寻找更多想吃的？</div>
                <button>点这里</button>
            </div>
            <div class="collect">
                <div class="collectOne">关于我的联系方式</div>
                <div class="collectTwo">
                    <div class="introOne">
                        <img src="./img/我的.png" alt="">   姓名:张先生
                    </div>
                    <div class="introOne">
                        <img src="./img/电话.png" alt="">   电话:4000-0000-0000
                    </div>
                    <div class="introOne">
                        <img src="./img/邮箱.png" alt="">   邮箱:12521244@136.CN
                    </div>
                    <div class="introOne">
                        <img src="./img/退出.png" alt="">   创真:5628545NBKVJ
                    </div>
                    <div class="introOne">
                        <img src="./img/网络.png" alt="">
                    </div>
                    <div class="introOne">
                        <img src="./img/定位-位置.png" alt="">
                    </div>
                </div>
                <div class="collectThird">
                    <div class="introTwo">
                        <img src="./img/二维码.png" alt="">
                    </div>
                    <div class="introTwo">
                        <img src="./img/QQ.png" alt="">
                    </div>
                    <div class="introTwo">
                        <img src="./img/微信.png" alt="">
                    </div>
                    <div class="introTwo">
                        <img src="./img/新浪微博.png" alt="">
                    </div>
                    <div class="introTwo">
                        <img src="./img/腾讯微博.png" alt="">
                    </div>
                    <div class="introTwo">
                        <img src="./img/qq空间.png" alt="">
                    </div>
                    <div class="introTwo">
                        <img src="./img/人人网.png" alt="">
                    </div>
                </div>
                <hr class="collectFour">
                <div class="collectFive">
                    <label>
                        昵称<br>
                        <input type="text" class="name">
                    </label>
                    <label>
                        联系电话<br>
                        <input type="text" class="phone">
                    </label>
                    <label>
                        电子邮箱<br>
                        <input type="text" class="email">
                    </label>
                    <button>提交</button>
                </div>
            </div>
            <div class="end">
                <ul>
                    <li>网站首页</li>
                    <li>公司简介</li>
                    <li>养生饮品</li>
                    <li>相生食谱</li>
                    <li>合作加强</li>
                    <li>新闻动态</li>
                    <li>联系我们</li>
                </ul>
            </div>
        </div>
    </div>
</body>
</html>